<template>
  <div id="app">

    <MusicCard>
      <template v-slot:header>
        <h2>热门歌手</h2>
      </template>

      <template v-slot:content>
        <div class="singers">
          <div v-for="singer in singers" :key="singer.name" class="singer">
            <img :src="singer.picUrl" :alt="singer.name">
            <p>{{ singer.name }}</p>
          </div>
        </div>
      </template>
    </MusicCard>


    <div class="lists">
        <MusicCard class="list">
          <template v-slot:header>
            <h2>{{ hotList.name }}</h2>
            <img :src="hotList.coverImgUrl" alt="热歌榜封面" />
          </template>

          <template v-slot:content>
            <p class="list-description">{{ hotList.description }}</p>
            <ul class="tracks-list">
              <li v-for="(track, index) in hotList.tracks" :key="index">
                {{ track.name }}
                <img :src="track.picUrl" alt="歌曲封面" />
              </li>
            </ul>
          </template>
        </MusicCard>
      


      <MusicCard class="list">
        <template v-slot:header>
          <h2>{{ newList.name }}</h2>
          <img :src="newList.coverImgUrl" alt="新歌榜封面" />
        </template>
        <template v-slot:content>
          <p class="list-description">{{ newList.description }}</p>
          <ul class="tracks-list">
            <li v-for="(track, index) in newList.tracks" :key="index">
              {{ track.name }}
              <img :src="track.picUrl" alt="歌曲封面" />
            </li>
          </ul>
        </template>
      </MusicCard>


      <MusicCard class="list">
        <template v-slot:header>
          <h2>{{ originalList.name }}</h2>
          <img :src="originalList.coverImgUrl" alt="原创榜封面" />
        </template>
        <template v-slot:content>
          <p class="list-description">{{ originalList.description }}</p>
          <ul class="tracks-list">
            <li v-for="(track, index) in originalList.tracks" :key="index">
              {{ track.name }}
              <img :src="track.picUrl" alt="歌曲封面" />
            </li>
          </ul>
        </template>
      </MusicCard>
    </div>

  </div>
</template>

<script>
import MusicCard from "./components/MusicCard.vue"
import singers from "./singers.js"
import hotList from "./hotList.js"
import newList from "./newList.js"
import originalList from "./originalList.js"
export default {
  name: "App",
  components: {
    MusicCard
  },
  data() {
    return {
      singers,
      hotList,
      newList,
      originalList,
    }
  }
}
</script>

<style scoped>
  #app {
    padding: 20px;
    max-width: 1000px;
    margin: 0 auto;
  }
  .singers {
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
    margin-bottom: 20px;
  }
  .singer {
  width: 150px;
  margin: 10px;
  text-align: center;
  }
  .singer img {
  width: 100%;
  }


  .lists {
  display: flex;
  justify-content: space-between;
  }

  .list {
    width: 30%;
    border: 1px solid #000;
    padding: 10px;
  }

</style>
